-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Customisable Font Text by user click #21
Conversation
public/index.html
Outdated
body { | ||
overflow: hidden; | ||
width: 350px; | ||
margin: 0px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
margin: 0px; | |
margin: 0; |
public/index.html
Outdated
<style> | ||
body { | ||
overflow: hidden; | ||
width: 350px; | ||
margin: 0px; | ||
} | ||
</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You can achieve the same thing with react
src/chrome-utils/changeText.ts
Outdated
@@ -0,0 +1,33 @@ | |||
export default async function changeText() { | |||
console.log("inside async fn"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
console.log("inside async fn"); |
src/chrome-utils/changeText.ts
Outdated
export default async function changeText() { | ||
console.log("inside async fn"); | ||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); | ||
console.log("tab.id", tab.id); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
console.log("tab.id", tab.id); |
src/chrome-utils/changeText.ts
Outdated
chrome.scripting.executeScript({ | ||
target: { tabId: tab.id ? tab.id : 1111 }, | ||
func: getTextFont, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
chrome.scripting.executeScript({ | |
target: { tabId: tab.id ? tab.id : 1111 }, | |
func: getTextFont, | |
}); | |
if(tab.id) { | |
chrome.scripting.executeScript({ | |
target: { tabId: tab.id }, | |
func: getTextFont, | |
}); | |
} |
src/chrome-utils/changeText.ts
Outdated
p{ | ||
font-weight: 400 !important; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p{ | |
font-weight: 400 !important; | |
} |
src/pages/TextSettings/index.tsx
Outdated
const StyledTextSettingsContainer = styled.div` | ||
max-width: 150px; | ||
height: 150px; | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is the reason behind this height? Assign width and height to app instead..
src/chrome-utils/changeText.ts
Outdated
chrome.scripting.executeScript({ | ||
target: { tabId: tab.id ? tab.id : 1111 }, | ||
func: getTextFont, | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please use the CSS injector api
Issue #4
Task:
To Add custom fonts and chnage it when user clicks.
Change:
After Refactoring the extension looks something like this
Here is the before and after image after the user clicks button.
Below is the example web page, when textSetting button is not clicked and font not applied.
Below is the example web page, after button is clicked and the font is applied, this is how the text of website looks.